<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            cursor: none!important;
        }
        .my-shadow {
            color: transparent;
            text-shadow: #111 0 0 5px;
        }
        div {
            color: black;
            box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
            margin: 50px auto;
        }
        .sparkley {
            background: #3e5771;
            color: white;
            border: none;
            padding: 16px 36px;
            font-weight: normal;
            border-radius: 3px;
            transition: all 0.25s ease;
            box-shadow: 0 38px 32px -23px black;
            margin: 0 1em 1em;
        }
        .sparkley:hover {
            background: #2c3e50;
            color: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <button class="sparkley" id="button">字体模糊开关</button><br>
    <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=489343535,3713603063&fm=58" alt=""><br>
    <a href="javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0)">一个三角形打掉页面内的文字图片</a><br>
    <a href="javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);">编辑页面</a><br>
    <a href='javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position="absolute"; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval("A()",5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)'>图片抖动</a><br>
    <a class="a1">输入框</a><br>
    <div id="div1">
        web页面小玩意儿（谷歌浏览器测试可行），在地址栏内输入以下内容会有意想不到的效果（不知道地址栏是什么意思？问度娘...）：<br>
        1、javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0)   <br>
        如果输入后看到前面的javascruot:消失，那手动添加上去，会出现一个三角形通过上下左右操作移动，空格发射黑点，可以打掉任何文字和图片 <br>
        2、javascript:document.body.contentEditable='true'; document.designMode='on'; void(0); <br>
        可以将网页里的任何内容删除或者自行添加（看起来好像黑了网页一样）<br>
        3、<span class="span1"></span><br>
        网页里的图片会动起来<br>
        4、<span class="span2"></span><br>
        可以作为输入框输入。
    </div>
    <div id="div1">
        
    </div>
    尝试将下面的颜色词汇改变
    <style style="display:block" contentEditable>
        body { color: blue }
    </style>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function(){
        $(".a1").attr("href", 'data:text/html, <html contenteditable>')
        $(".span1").text('javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position="absolute"; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval("A()",5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)')
        $(".span2").text('data:text/html, <html contenteditable>');
        var num = 1;
        $("#button").click(function(){
            if(num == 0){
                $("body").removeClass("my-shadow");
                num = 1;
            }else{
                $("body").addClass("my-shadow");
                num = 0;
            }
            
        })
    })
</script>
<script>
    $(function() {

        // default is varying levels of transparent white sparkles
        $(".sparkley:first").sparkleh();

        // rainbow as a color generates random rainbow colros
        // count determines number of sparkles
        // overlap allows sparkles to migrate... watch out for other dom elements though.
        $(".sparkley:last").sparkleh({
        color: "rainbow",
        count: 100,
        overlap: 10
        });

        // here we create fuscia sparkles
        $("h1").sparkleh({
        count: 80,
        color: "#ff0080"
        });

        $("p").sparkleh({
        count: 20,
        color: "#00ff00"
        });

        // an array can be passed, too for colours
        // for an image, the image needs to be fully loaded to set
        // the canvas to it's height/width.
        $("#image").imagesLoaded( function() {
        $(".img").sparkleh({
            count: 25,
            color: ["#00afec","#fb6f4a","#fdfec5"]
        });
        });

        });

        $.fn.sparkleh = function( options ) {

        return this.each( function(k,v) {

        var $this = $(v).css("position","relative");

        var settings = $.extend({
            width: $this.outerWidth(),
            height: $this.outerHeight(),
            color: "#FFFFFF",
            count: 30,
            overlap: 0
        }, options );

        var sparkle = new Sparkle( $this, settings );

        $this.on({
            "mouseover focus" : function(e) {
            sparkle.over();
            },
            "mouseout blur" : function(e) {
            sparkle.out();
            }
        });

        });

        }

        function Sparkle( $parent, options ) {
        this.options = options;
        this.init( $parent );
        }

        Sparkle.prototype = {

        "init" : function( $parent ) {

        var _this = this;

        this.$canvas = 
            $("<canvas>")
            .addClass("sparkle-canvas")
            .css({
                position: "absolute",
                top: "-"+_this.options.overlap+"px",
                left: "-"+_this.options.overlap+"px",
                "pointer-events": "none"
            })
            .appendTo($parent);

        this.canvas = this.$canvas[0];
        this.context = this.canvas.getContext("2d");
        this.sprite = new Image();

        this.canvas.width = this.options.width + ( this.options.overlap * 2);
        this.canvas.height = this.options.height + ( this.options.overlap * 2);

        this.sprites = [0,6,13,20];
        this.particles = this.createSparkles( this.canvas.width , this.canvas.height );

        this.anim = null;
        this.fade = false;

        },

        "createSparkles" : function( w , h ) {

        var holder = [];

        for( var i = 0; i < this.options.count; i++ ) {

            var color = this.options.color;

            if( this.options.color == "rainbow" ) {
            color = '#'+Math.floor(Math.random()*16777215).toString(16);
            } else if( $.type(this.options.color) === "array" ) {
            color = this.options.color[ Math.floor(Math.random()*this.options.color.length) ];
            }

            holder[i] = {
            position: {
                x: Math.floor(Math.random()*w),
                y: Math.floor(Math.random()*h)
            },
            style: this.sprites[ Math.floor(Math.random()*4) ],
            delta: {
                x: Math.floor(Math.random() * 1000) - 500,
                y: Math.floor(Math.random() * 1000) - 500
            },
            size: parseFloat((Math.random()*2).toFixed(2)),
            color: color
            };

        }

        return holder;

        },

        "draw" : function( time, fade ) {

        var ctx = this.context;
        var img = this.sprite;
            img.src = this.datauri;

        ctx.clearRect( 0, 0, this.canvas.width, this.canvas.height );

        for( var i = 0; i < this.options.count; i++ ) {

            var derpicle = this.particles[i];
            var modulus = Math.floor(Math.random()*7);

            if( Math.floor(time) % modulus === 0 ) {
            derpicle.style = this.sprites[ Math.floor(Math.random()*4) ];
            }

            ctx.save();
            ctx.globalAlpha = derpicle.opacity;
            ctx.drawImage(img, derpicle.style, 0, 7, 7, derpicle.position.x, derpicle.position.y, 7, 7);

            if( this.options.color ) {  

            ctx.globalCompositeOperation = "source-atop";
            ctx.globalAlpha = 0.5;
            ctx.fillStyle = derpicle.color;
            ctx.fillRect(derpicle.position.x, derpicle.position.y, 7, 7);

            }

            ctx.restore();

        }

        },

        "update" : function() {

        var _this = this;

        this.anim = window.requestAnimationFrame( function(time) {

            for( var i = 0; i < _this.options.count; i++ ) {

            var u = _this.particles[i];

            var randX = ( Math.random() > Math.random()*2 );
            var randY = ( Math.random() > Math.random()*3 );

            if( randX ) {
                u.position.x += (u.delta.x / 1500); 
            }        

            if( !randY ) {
                u.position.y -= (u.delta.y / 800);         
            }

            if( u.position.x > _this.canvas.width ) {
                u.position.x = -7;
            } else if ( u.position.x < -7 ) {
                u.position.x = _this.canvas.width; 
            }

            if( u.position.y > _this.canvas.height ) {
                u.position.y = -7;
                u.position.x = Math.floor(Math.random()*_this.canvas.width);
            } else if ( u.position.y < -7 ) {
                u.position.y = _this.canvas.height; 
                u.position.x = Math.floor(Math.random()*_this.canvas.width);
            }

            if( _this.fade ) {
                u.opacity -= 0.02;
            } else {
                u.opacity -= 0.005;
            }

            if( u.opacity <= 0 ) {
                u.opacity = ( _this.fade ) ? 0 : 1;
            }

            }

            _this.draw( time );

            if( _this.fade ) {
            _this.fadeCount -= 1;
            if( _this.fadeCount < 0 ) {
                window.cancelAnimationFrame( _this.anim );
            } else {
                _this.update(); 
            }
            } else {
            _this.update();
            }

        });

        },

        "cancel" : function() {

        this.fadeCount = 100;

        },

        "over" : function() {

        window.cancelAnimationFrame( this.anim );

        for( var i = 0; i < this.options.count; i++ ) {
            this.particles[i].opacity = Math.random();
        }

        this.fade = false;
        this.update();

        },

        "out" : function() {

        this.fade = true;
        this.cancel();

        },

        "datauri" : ""

        }; 

        // $('img.photo',this).imagesLoaded(myFunction)
        // execute a callback when all images have loaded.
        // needed because .load() doesn't work on cached images

        // mit license. paul irish. 2010.
        // webkit fix from Oren Solomianik. thx!

        // callback function is passed the last image to load
        //   as an argument, and the collection as `this`

        $.fn.imagesLoaded = function(callback){
        var elems = this.filter('img'),
            len   = elems.length,
            blank = "";

        elems.bind('load.imgloaded',function(){
            if (--len <= 0 && this.src !== blank){ 
            elems.unbind('load.imgloaded');
            callback.call(elems,this); 
            }
        }).each(function(){
        // cached images don't fire load sometimes, so we reset src.
        if (this.complete || this.complete === undefined){
            var src = this.src;
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            // data uri bypasses webkit log warning (thx doug jones)
            this.src = blank;
            this.src = src;
        }  
        }); 

        return this;
        };
</script>
</html>